<template>
    <div class="carDetails">
        <div class="content">
            <!-- 复选框组：内可能包含多个复选框   v-model绑定的是所有选中项的标识符，是一个数组 -->
            <van-checkbox-group v-model="result" @change="groupChange">
                <div v-for="(item, index) in store.state.cartList" :key="index">
                    <StoreAdd :item="item" :showCheck="true" :onChange="onChange" />
                </div>
            </van-checkbox-group>
        </div>
        {{ result }}
        <!-- 底部结算框 -->
        <van-submit-bar :price="allPrice * 100" button-text="结算" @submit="onSubmit" class="submit_all"
            button-color="#ffc400" v-if="isDelete">
            <van-checkbox v-model="checked" checked-color="#ffc400" @click="choseAll">全选</van-checkbox>
        </van-submit-bar>

        <!-- 底部删除框 -->
        <div class="detele_box" v-else>
            <div class="left">
                <van-checkbox v-model="checked" checked-color="#ffc400" @click="choseAll">全选</van-checkbox>
            </div>
            <div class="delete" @click="deleteClick">删除</div>
        </div>
    </div>
</template>
<script>
import { defineComponent, reactive, toRefs, onMounted, computed } from 'vue';
import { useStore } from 'vuex';
import StoreAdd from "../../../components/Store_add.vue"
import { showFailToast } from 'vant';
import mitter from '../../../common/js/mit'
import { useRouter } from 'vue-router';
export default defineComponent({
    name: 'App',
    components: {
        StoreAdd
    },
    setup() {
        const store = useStore();
        const router = useRouter()
        const data = reactive({
            result: [],
            checked: true,
            isDelete: true
        })
        // 商品初始化==>将vuex里的id生成一个新的列表赋给result
        const init = () => {
            data.result = store.state.cartList.map((item) => item.id);
        }
        // onMounted在组件挂载后进行对商品初始化
        onMounted(() => {
            init();
        })
        // 商品个数同步：通过复选框onchange方法返回的value，detail
        const onChange = (value, detail) => {
            store.state.cartList.map((item) => {
                if (item.id === detail.name) {
                    item.num = value
                }
            })
        }
        // 全选或者取消
        const choseAll = () => {
            // 如果复选框标识数组的长度 不等于vuex数组长度，说明至少有一个没选到，那就调用初始化==>重新将vuex中的数据的id生成一个新的列表赋给result
            if (data.result.length !== store.state.cartList.length) {
                init();
            }
            // 否则说明复选框已经全部选到了，就让他全部取消高亮，也就是让标识数组变空，实现方法，直接赋一个新数组
            else {
                data.result.length = 0;
            }
        }
        // 通过id获取数据
        // type:1删除 2:结算
        const update = (type) => {
            return store.state.cartList.filter(item => {
                return type == 2 ? data.result.includes(item.id) : !data.result.includes(item.id)
            })
        }
        // 结算按钮
        const onSubmit = () => {
            if (data.result.length) {
                store.commit("BAY", update(2))
                // 通过路由跳转页面的同时，传输数据
                router.push({
                    path: '/creatOrde',
                    // 通过query传数据，通过useRoute获取数据
                    query: {
                        list: data.result
                    }
                })
            } else {

                showFailToast("请选择结算商品");

            }

        };
        // 每个复选框的点击事件触发
        const groupChange = (result) => {
            // 判断result的长度是否等于vuex中数据的长度
            if (result.length === store.state.cartList.length) {
                // 如果长度相等,则让总价复选框高亮
                data.checked = true;
            } else {
                // 否则不相等让总价复选框不高亮
                data.checked = false;
            }
            data.result = result;
        }
        // 总价
        const allPrice = computed(() => {
            let countList = store.state.cartList.filter((item) => data.result.includes(item.id))
            let sum = 0;
            countList.forEach((item) => {
                sum += item.num * item.price;
            })
            return sum;
        })
        // 监听编辑器：如果edit发生变化，就执行isDelete取反
        mitter.on("edit", () => {
            data.isDelete = !data.isDelete;
        })
        // 删除商品
        const deleteClick = () => {
            if (data.result.length) {
                store.commit("DELETE", update(1))
                store.commit("EDIT", "delete")
                data.isDelete = true
                data.result.length = 0
            }
        }
        return {
            store,
            ...toRefs(data),
            onSubmit,
            choseAll,
            allPrice,
            onChange,
            groupChange,
            deleteClick,

        }
    }


})
</script>
<style lang="less" scoped>
.carDetails {
    font-size: 14px;
    flex: 1;
    position: relative;
    overflow-y: auto;
    padding: 20px 20px 55px;

    .submit_all {
        position: fixed;
        font-weight: 300;
        bottom: 53px;
    }

    .detele_box {
        position: fixed;
        bottom: 53px;
        right: 0;
        display: flex;
        justify-content: space-between;
        width: 100%;
        background-color: #fff;
        border-radius: 10px;
        height: 50px;
        align-items: center;
        padding: 0 16px;
        box-sizing: border-box;

        .left {
            font-weight: 100;
            font-size: 13px;
            display: flex;
            align-items: center;
        }

        .delete {
            display: block;
            color: #fff;
            background-color: #ffc400;
            border-radius: 20px;
            font-size: 13px;
            width: 110px;
            height: 80%;
            font-weight: 600;
            line-height: 260%;
            text-align: center;

        }
    }
}

.content {
    padding: 10px;
    background-color: #fff;
    border-radius: 10px;
}
</style>